import {
  RadarChartOutlined,
  SnippetsOutlined,
  DollarOutlined,
  LaptopOutlined
} from '@ant-design/icons'
import { Row, Col, Card } from 'antd'
import { useState } from 'react'
import './OverView.scss'

function OverView() {
  const [data] = useState([
    {
      number: 13497,
      desc: '园区总面积(平方米)',
      icon: <RadarChartOutlined />,
      iconColor: '#8EA4DA'
    },
    {
      number: 8635,
      desc: '总租赁面积(平方米)',
      icon: <SnippetsOutlined />,
      iconColor: '#8BBE53'
    },
    {
      number: 38764,
      desc: '园区总产值(万元)',
      icon: <DollarOutlined />,
      iconColor: '#ADC9D2'
    },
    {
      number: 2875,
      desc: '入驻企业总数(家)',
      icon: <LaptopOutlined />,
      iconColor: '#CD9972'
    }
  ])
  return (
    <>
      <Row gutter={16}>
        {data.map((item, index) => {
          return (
            <Col span={6} key={index}>
              <Card>
                <div className="card-wrap">
                  <div className="left-wrap">
                    <div className="left-num">{item.number}</div>
                    <div className="left-num">{item.desc}</div>
                  </div>
                  <div className="icon-wrap" style={{ color: item.iconColor }}>
                    {item.icon}
                  </div>
                </div>
              </Card>
            </Col>
          )
        })}
      </Row>
    </>
  )
}

export default OverView
